
<template
>
<div class="wrapper">
    <el-header class="container">
      <el-row class="rowr">
        <!--头部-->
        <el-col :span="24" class="topbar-wrap">
          <div class="topbar-logo topbar-btn">
            <a href="/"
              ><img src="../assets/logo.png" style="padding-left: 8px"
            /></a>
          </div>
          <div class="topbar-logos">
            <a href="/" style="color: #00ffff"
              ><span v-show="!$store.state.collapsed"></span
            ></a>
          </div>
          <div class="topbar-title">
              <!-- 注意：这里就是topNavState作用之处，根据当前路由所在根路由的type值判断显示不同顶部导航菜单 -->
              <el-col :span="24">
                <el-menu class="el-menu-demo" mode="horizontal" :default-active="toIndex()"  @select="handleSelect">
                  <template v-for="item in items">
                  <el-menu-item :index="item.index" :key="item.index"
                    >
                    <template slot="title">
                      <i class="el-icon-office-building"
                      ></i>
                    <span slot="title">{{ item.title }}</span>
                    </template>
                    
                    </el-menu-item>    
                   </template>           <!-- <el-menu-item index="item.index2"
                    ><i class="el-icon-s-cooperation"
                      >任务/审批</i
                    ></el-menu-item
                  >
                  <el-menu-item index="item.index3"
                    ><i class="el-icon-tickets">日志</i></el-menu-item
                  >
                  <el-menu-item index="item.index4"
                    ><i class="el-icon-phone">通讯录</i></el-menu-item
                  >
                  <el-menu-item index="item.index5"
                    ><i class="el-icon-s-finance">项目管理</i></el-menu-item
                  >
                  <el-menu-item index="item.index6"
                    ><i class="el-icon-s-marketing">商业智能</i></el-menu-item
                  >
                  <el-menu-item index="item.index7"
                    ><i class="el-icon-date">日历</i></el-menu-item
                  >
                  <el-menu-item index="/systemManager"
                    ><i class="el-icon-s-grid"></i
                  ></el-menu-item> -->
                </el-menu>
              </el-col>
         
          </div>
          <!-- z最右边 -->
      <div class="topbar-account topbar-btn">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner">
            <!-- --> -->
            <!-- 姓名  头像{{ nickname }}  el-icon-video-camera-solid-->
            <i class="el-icon-video-camera-solid"></i>
            <i class="el-icon-message-solid"></i>
            <i class="iconfont icon-user"></i> 
            <span class="el-dropdown-link">
                        {{ username }}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
           
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="jumpTo('/user/profile')">
                <span style="color: #555; font-size: 14px">个人信息</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div @click="jumpTo('/user/changepwd')">
                <span style="color: #555; font-size: 14px">修改密码</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</el-header>
    
    <!-- 页面左侧二级菜单栏，和主体内容区域部分 -->
    <el-main>
        <router-view></router-view>
    </el-main>

</div>
</template>

<script>
export default {
    data() {
        return {
           items: [    // 水平一级菜单栏的菜单
                { index: 'test1', title: '客户管理' },
                { index: 'test2', title: '任务/审批' },
                { index: 'test3', title: '日志' },
                 { index: 'test4', title: '通讯录' },
                { index: 'test5', title: '商业智能' },
                { index: 'test6', title: '日历' },
                { index: 'test7', title: '项目管理' },
            ]
        }
    },
    computed: {
        username() {
            // let username = localStorage.getItem('ms_username');
            // return username ? username : this.name;
            return "admin"
        }
    },
    methods:{
        // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
        toIndex() {
            return this.$route.path.split('/')[0];
        },
        // 切换菜单栏
        handleSelect(index) {
            this.$router.push('/' + index);
        },
        // 用户名下拉菜单选择事件
       
    }
}
</script>

<style scoped>
.wrapper {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
}
* {
  margin: 0;
  padding: 0;
}

.el-aside {
  margin: 0;
  padding: 0;
  margin-top: -10px;
  text-align: center;
  line-height: 300px;
  height: 800px;
}


#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
.rowr{
  margin: 0;
  padding: 0;
  width: 100%;
}


.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
}

/* top navbar style start */
.topbar-wrap {
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  width: 100%;
}

.topbar-wrap .topbar-btn {
  color: #fff;
}

 .topbar-wrap .topbar-logo {
  float: left;
  width: 60px;
  line-height: 26px;
  margin: 0;
  padding: 0;
}

.topbar-wrap .topbar-logos {
  margin: 0;
  padding: 0;
  float: left;
  width: 200px;
  line-height: 48px;
  font-size: 14px;
}

.topbar-wrap .topbar-logo img, .topbar-wrap .topbar-logos img {

  height: 30px;
   margin: 0;
  padding: 0;
}

.topbar-wrap .topbar-title {
  float: left;
  text-align: center;
  padding-left: 70px;
  border-left: 0px solid rgb(255, 255, 255);
}

.topbar-title .el-menu--horizontal {
  background-color: transparent;
}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal > .el-menu-item.is-active {
  color: rgb(0, 0, 0);
  background-color: transparent;
  border-bottom:  3px solid #409EFF  !important;
  
}

.topbar-title .el-menu--horizontal > .el-menu-item {
  height: 50px;
  line-height: 50px;
  width: 100px;
  color: rgb(0, 0, 0);
  display: flex;
  
}

.topbar-title .el-menu--horizontal > .el-menu-item > i {
  font-size:10px;
  color: #000;
  text-align:center;
  align-self: center;
  color: rgb(0, 0, 0);
  
 
}

.topbar-title .el-menu--horizontal > .el-menu-item > i:hover {
  
  color: #409EFF;
 
}


.el-menu-item .iconfont {
  margin-right: 10px;
  display: inline-block;
  width: 80px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

.topbar-wrap .topbar-account {
  float: right;
  padding-right: 12px;
}

 .topbar-wrap .topbar-timer {
  display: inline-block;
}

/* top navbar style end */

</style>